<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-button @click="addForm">
        添加
      </el-button>
    </el-row>
    <el-row>
      <el-col :span="23">
        <el-table
          :data="form.ReportAggregates"
          :height="tableHeight"
          border
          fit
          highlight-current-row
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column label="属性" prop="AttributeName">
            <template slot-scope="scope">
              <el-input v-model="scope.row.AttributeName" />
            </template>
          </el-table-column>

          <el-table-column label="关联报表">
            <template slot-scope="scope">
              <el-select v-model="scope.row.ConnectReportId" style="width: 95%" filterable clearable>
                <el-option v-for="item in reportList" :key="item.ReportId" :label="item.Code+' '+item.Name" :value="item.ReportId" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="removeForm(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="margin-top: 15px">
          <el-button type="primary" @click="save">
            保存
          </el-button>
          <el-button @click="close">
            取消
          </el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import commonValidator from '@/utils/commonValidator'
import reportFormTypeEnum from '@/enums/report/reportFormTypeEnum'
import apolloClient from '@/utils/graphql'
import gql from 'graphql-tag'
import displayTypeEnum from '@/enums/report/displayTypeEnum'
import reportTypeEnum from '@/enums/report/reportTypeEnum'
export default {
  name: 'ReportFormInfo',
  props: {
    // id
    id: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      // 表单数据
      form: {
        ReportDbId: this.id,
        ReportAggregates: []
      },
      enums: {
        reportFormTypeEnum
      },
      commonValidator,
      reportList: []
    }
  },
  computed: {
    tableHeight() {
      return document.body.clientHeight - 300
    }
  },
  mounted() {
    this.getDetail()
    this.getReportList()
  },
  methods: {
    getReportList() {
      var postData = {}
      postData.Type = reportTypeEnum.SQL.value
      postData.DisplayType = [displayTypeEnum.DETAIL.value, displayTypeEnum.LIST.value]
      apolloClient.query({
        fetchPolicy: 'network-only',
        query: gql`query getReportList($Req: ReportListReq!){
                    reportList(Req: $Req){
                        ReportId
                        Code
                        Name
                    }
                 }`,
        variables: { Req: postData }
      }).then(response => {
        if (response.data) {
          this.reportList = response.data.reportList
        }
      })
    },
    addForm() {
      this.form.ReportAggregates.push({ AttributeName: null, ConnectReportId: null })
    },
    removeForm(index) {
      this.form.ReportAggregates.splice(index, 1)
    },
    getDetail() {
      apolloClient.query({
        fetchPolicy: 'network-only',
        query: gql`query ($reportId: String!) {
            reportDetail(ReportId: $reportId){
                ReportId
                ReportAggregates{
                    AttributeName
                    ConnectReportId
                }
            }
        }`,
        variables: { reportId: this.id }
      }).then(response => {
        if (response.data) {
          if (response.data.reportDetail) {
            this.form.ReportAggregates = response.data.reportDetail.ReportAggregates
          }
        } else {
          this.$notify.error(response.errors[0].message)
        }
      }).catch((err) => {
        this.$notify.error(err.message)
      })
    },
    // 保存数据
    save() {
      var postData = {}
      postData.ReportId = this.id
      postData.Items = []
      for (const aggregate of this.form.ReportAggregates) {
        var item = {}
        item.AttributeName = aggregate.AttributeName
        item.ConnectReportId = aggregate.ConnectReportId
        postData.Items.push(item)
      }
      apolloClient.mutate({
        mutation: gql`mutation ($req: UpdateReportAggregateReq!) {
            updateReportAggregate(Req: $req)
        }`,
        variables: { req: postData }
      }).then(response => {
        console.log(response)
        if (response.data.updateReportAggregate) {
          this.$notify.success('保存成功')
          this.close()
        } else {
          this.$notify.error(response.errors[0].message)
        }
      }).catch((err) => {
        this.$notify.error(err.message)
      })
    },
    close() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
